@extends('admin.public.header')
@section('title','订单详情')
<style>
    .orderProcess{
        margin-bottom: 1.5rem;
        width: 100%;
        height: 8rem;
        border: 1px solid #ECEEEF;
        position: relative;
        margin-left: 1.1rem;
        margin-right: 1.1rem;
    }

    table .orderProcess ul{
        padding-left: 1rem;
    }

    .orderWord{
        height: 3rem;
    }
    
    .over{
        color: green;
    }

    .noOver{
        color: #888888;
    }

    .orderProcess ul{
        list-style: none;
        position: absolute;
        top:50%;
        left: 50%;
        margin-top: -4rem;
        margin-left: -28rem;
        padding-left: 0;
    }
    ul li{
        float: left;
        text-align: center;
        width: 8rem;
    }

    .orderIcon .iconfont{
        font-size: 2rem;
    }

    li i{
        height: 3.8rem;
        line-height: 3.8rem;
    }

</style>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_807230_b9igprrhpse.css" media="all">
@section('listcontent')
    <div class="layui-tab-content">
        <div style="padding: 20px; background-color: #FAFAFA;">
            <div class="orderProcess">
                <ul>
                    <li>
                        <div>
                            <div class="orderIcon"><i class="iconfont icon-xiadan over"></i></div>
                            <div class="over">已下单</div>
                        </div>
                        <div class="orderWord over">
                            {{ $info->created_at }}
                        </div>                                          
                    </li>
                    @if ($info['is_delete'] == 1 || $info['order_status'] == 4)
                    <li class="orderWord over">
                        <i class="iconfont icon-dian"></i>
                        <i class="iconfont icon-dian"></i>
                        <i class="iconfont icon-dian"></i>
                        <i class="iconfont icon-dian"></i>
                        <i class="iconfont icon-jiantouyou"></i>
                    </li>
                    <li class="over">
                        <div class="orderIcon">
                            <i class="iconfont icon-iconfontzhizuobiaozhun0262"></i>
                        </div>
                        <div>已取消</div>
                    </li>
                    @else
                        @if ($info['order_status'] >= 1)
                        <li class="orderWord over">
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-jiantouyou"></i>
                        </li>
                        @else
                        <li class="orderWord over">
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-jiantouyou noOver"></i>
                        </li>    
                        @endif
                        <li>
                            <div>
                            @if ($info['order_status'] >= 1)
                                <div class="orderIcon">
                                    <i class="iconfont icon-shouye over"></i>
                                </div>
                                <div class="over">已付款</div> 
                                <div class="orderWord over">
                                    {{ $info->pay_time }}
                                </div>    
                                @else
                                <div class="orderIcon">
                                    <i class="iconfont icon-shouye"></i>
                                </div>
                                <div class="noOver">未付款</div>
                                @endif
                            </div>                                  
                        </li>
                        @if ($info['order_status'] >= 2)
                        <li class="orderWord over">
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-jiantouyou"></i>
                        </li>
                        @elseif ($info['order_status'] >= 1)
                        <li class="orderWord over">
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-jiantouyou noOver"></i>
                        </li>  
                        @else
                        <li class="orderWord over">
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-jiantouyou noOver"></i>
                        </li>    
                        @endif
                        <li>
                            <div>
                            @if ($info['order_status'] >= 2)
                                <div class="orderIcon">
                                    <i class="iconfont icon-fahuo over"></i>
                                </div>
                                <div class="over">已发货</div>
                                <div class="orderWord over">{{ $info->send_time }}</div>
                            @else
                                <div class="orderIcon">
                                    <i class="iconfont icon-fahuo noOver"></i>                             
                                </div>    
                                <div class="noOver">未发货</div>         
                            @endif
                            </div>                              
                        </li>
                        @if ($info['order_status'] >= 2)
                        <li class="orderWord over">
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-jiantouyou"></i>
                        </li>
                        @elseif ($info['order_status'] == 3)
                        <li class="orderWord over">
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-jiantouyou noOver"></i>
                        </li>  
                        @else
                        <li class="orderWord over">
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-dian noOver"></i>
                            <i class="iconfont icon-jiantouyou noOver"></i>
                        </li>    
                        @endif
                        <li>
                            <div>
                            @if ($info['order_status'] == 3)
                                <div class="orderIcon">
                                    <i class="iconfont icon-icon-receive over"></i>
                                </div>
                                <div class="over">已收货</div>
                                <div class="orderWord over">{{ $info->confirm_time }}</div>
                            @else
                                <div class="orderIcon">
                                    <i class="iconfont icon-icon-receive noOver"></i>
                                </div>
                                <div class="noOver">未收货</div>
                            @endif
                            </div>                            
                        </li>
                    @endif    
                </ul>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">订单信息</div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>订单编号</td>
                                <td>{{ $info->order_no }}</td>
                            </tr>
                            <tr>
                                <td>订单状态</td>
                                <td style="color:#1E9FFF">{{ $info->order_status_name }}</td>
                            </tr>
                            <tr>
                                <td>下单用户</td>
                                <td>{{ $info->nickname }}</td>
                            </tr>
                            <tr>
                                <td>支付方式</td>
                                <td style="color:#1E9FFF">{{ $info->pay_name }}</td>
                            </tr>
                            @if($info->order_status >= 1 && $info->order_status != 4)
                                <tr>
                                    <td>支付时间</td>
                                    <td>{{ $info->pay_time }}</td>
                                </tr>
                            @endif
                            <tr>
                                <td>收货人信息</td>
                                <td><span>收货人：{{ $info->name }}</span><br/><span>联系方式：{{ $info->mobile }}</span><br/><span>收货地址：{{ $info->address }}</span></td>
                            </tr>
                            <tr>
                                <td>下单时间</td>
                                <td>{{ $info->created_at }}</td>
                            </tr>
                            @if($info['order_status'] >= 2 && $info->order_status != 4)
                                <tr>
                                    <td>快递信息</td>
                                    <td><span>快递公司：{{ $info->express }}</span><br/><span>快递单号：{{ $info->express_no }}</span></td>
                                </tr>
                            @endif
                            @if($info['order_status'] >= 2 && $info->order_status != 4)
                                <tr>
                                    <td>发货时间</td>
                                    <td>{{ $info->send_time }}</td>
                                </tr>
                            @endif
                            @if($info['order_status'] >= 3 && $info->order_status != 4)
                                <tr>
                                    <td>收货时间</td>
                                    <td>{{ $info->confirm_time }}</td>
                                </tr>
                            @endif
                            </tbody>
                        </table>
                        <div class="layui-card-header">订单金额</div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>订单总金额（含运费）</td>
                                <td style="color:#FF5722">{{ $info->total_price }} 元</td>
                            </tr>
                            <tr>
                                <td>订单运费</td>
                                <td style="color:#FF5722">{{ $info->express_price }} 元</td>
                            </tr>
                            <tr>
                                <td>实际支付金额</td>
                                <td style="color:#FF5722">{{ $info->pay_price }} 元</td>
                            </tr>
                            @if($info->integral > 0)
                            <tr>
                                <td>可获得积分</td>
                                <td style="color:#FF5722">{{ $info->integral }}</td>
                            </tr>
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">商品信息</div>
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                            </colgroup>
                            <tbody>
                            @foreach($order_detail as $k => $v)
                            <tr>
                                <td>商品【{{ $k+1 }}】</td>
                                <td><image style="width:80px;height:80px;display:block;float:left;" src="{{ $v->goods_pic }}"><span style="margin-left:10px;">商品名称：{{ $v->goods_name }}<span><br/><span style="margin-left:10px;color:#1E9FFF">规格：{{ $v->goods_attr[0]['attr_group_name'] }} - {{ $v->goods_attr[0]['attr_name'] }}</span><br/><span style="margin-left:10px;">数量：{{ $v->goods_num }}</span><br/><span style="margin-left:10px;color:#FF5722;">小计：{{ $v->pay_price }} 元</span></td>
                                
                            </tr>
                            @endforeach
                            <tr>
                                <td>买家留言</td>
                                <td>{{ $info->remark }}</td>
                            </tr>
                            
                            </tbody>
                        </table>
                    </div>
                    <form class="layui-form layui-form-pane">
                        <div class="layui-form layuimini-form">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label" style="text-align: left;">商家备注</label> 
                                <input type="hidden" name="id" value="{{ $info->id ?? 0}}">
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" name="seller_comments" class="layui-textarea">{{ $info->seller_comments ?? ''}}</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-normal" id="saveBtn" lay-submit lay-filter="saveBtn">保 存</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
            </div>
        </div>   
    </div>

@endsection

@section('listscript')
    <script type="text/javascript">
    layui.use(['layer','form'], function () {
            var layer = layui.layer, form = layui.form, $=layui.jquery;

        form.on('submit(saveBtn)', function(data){
            var loading = layer.msg('加载中..', {icon: 16,shade: 0.3,time: false});
            $.ajax({
                url:'/admin/order/detail',
                type:'post',
                data:data.field,
                dataType:"JSON",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);  //返回数据关闭loading
                    if(res.code == 0){
                        $("#saveBtn").removeClass("layui-btn-normal").addClass("layui-btn-disabled");
                        $("#saveBtn").attr("disabled","true");
                        layer.msg(res.message,{icon: 1},function(){
                            setTimeout('location.reload()',500);
                        });
                        
                    }
                    else{
                        layer.msg(res.message,{icon: 2});
                    }
                },
                error:function(e){
                    layer.msg("提交失败",{icon: 2});
                },
                
            });
            return false;
        });
    });
</script>
@endsection

